<template>
  <div class="home">
    <div class="block bannerimg">
      <el-carousel height="150px">
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <img :src="item.src" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
     <keep-alive>
      <ul class="homelist">
        <router-link :to="'/detail/'+item.title" tag="li" v-for="(item,index) in iphoneList" :key="index">
          <img :src="item.src" :alt="item.title">
          <div>
            <p>{{item.title}}</p>
            <p>￥{{parseInt(item.price)}}</p>
            <p class="addCart">
              <span @click.stop="addCount(item)">加入购物车</span>
            </p>
          </div>
        </router-link>
      </ul>
     </keep-alive>
  </div>
</template>

<style lang="less" scoped>
.homelist li {
  display: flex;
  border-bottom: 1px solid #ccc;
  padding: .2rem;
  div {
    flex: 1;
  }
  p{
    margin-bottom: .1rem;
  }
  img {
    width: .8rem;
    height: .8rem;
  }
  .addCart {
    text-align: right;
    span {
      font-size: .12rem;
    }
  }
}
.bannerimg img{
  width: 100%;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
</style>

<script>
import {mapState,mapActions} from 'vuex';
export default {
  name: 'Home',
  data: function () {
    return {
    }
  },
  computed: {
    // ...mapState({
    //   homename: state => state.homeStore.homename
    // })
    ...mapState("homeStore",["iphoneList",'bannerList','homename'])
  },
  created () {
  },
  methods: {
    ...mapActions('cartStore',['set_change_cartList']),
    addCount (item) {
      this.set_change_cartList(item);
      this.$message({
        type: 'success',
        message: '加入购物车成功',
        duration: 500
      });
    }
  }
}
</script>
